<template>
	<div class="personHomepage">
		<!-- 头部 -->
		<div class="header">
			<div class="header-main">
				<image :src="userInfo.user_info.photo_url||defaultJpg" mode="aspectFill" class="header-logo"></image>
				
			</div>
			<div class="header-nickname">{{userInfo.user_info.nickname}}</div>
			<div class="header-desc">{{userInfo.user_info.signature||''}}</div>
			<!-- <div class="header-tag-list">
				<div class="header-tag-list-item">广州</div>
				<div class="header-tag-list-item">啊手动阀打发的12撒旦飞洒地方</div>
			</div> -->
			<div class="header-content">
				<div class="header-content-tag-wrapper">
					<div class="header-content-tag"  @click="toFollow">
						<div class="num">{{followNum}}</div>
						<div class="name">关注</div>
					</div>
					<div class="header-content-tag"  @click="toFans">
						<div class="num">{{fansNum}}</div>
						<div class="name">粉丝</div>
					</div>
					<div class="header-content-tag" >
						<div class="num">{{goodNum}}</div>
						<div class="name">获赞</div>
					</div>
				</div>
				<div class="header-btn-wrapper">
					<div class="header-talk" @click="toTalk" v-if="userId &&(hasFollow==1||hasFollow==2)">私信</div>
					<div v-if="userId&&hasFollow==2" @click="toAnonymous" class="nick-talk">匿名</div>
					<div class="header-btn" @click="toPersonInformation" v-if="!userId">编辑资料</div>
					<div class="header-btn" @click="followPeople('follow')" v-if="userId &&hasFollow==0">关注</div>
					<div class="header-btn header-btn-un" @click="followPeople('unFollow')" v-if="userId &&hasFollow==1">已关注</div>
					<div class="header-btn header-btn-un" @click="followPeople('unFollow')" v-if="userId &&hasFollow==2">互相关注</div>
					
				</div>
			</div>
		</div>
		<!-- 头部end -->
		
		<div class="invitation-home">
			
			<!-- 分类 -->
			<!-- <div class="nav-tab" v-if="showTabs">
				<van-tabs :active="tabBaractive" @change="tabBarChange">
				  <van-tab title="全部" name="all"></van-tab>
				  <van-tab title="帖子" name="post"></van-tab>
				  <van-tab title="评论" name="comments"></van-tab>
				</van-tabs>
			</div> -->
			<!-- 分类end -->
			
			<!-- 评论 -->
			<!-- <div v-show="tabBaractive=='comments'">
				<comments :commentsList="commentsList"/>
			</div> -->
			<!-- 评论end -->
			
			<!-- 帖子 -->
			<div  v-show="tabBaractive=='post'" >
				<invitation :Article.sync="postList" :isOwner="!userId?true:false" :show="true" :nowSite="popularSite"></invitation>
				<!-- <personInvitation :Article.sync="postList" @addNum="addNum" @reduceNum="reduceNum"></personInvitation> -->
			</div>
			<!-- 帖子 end -->
			
			<!-- <div v-show="tabBaractive=='all'">
				<totalContent :totalContent="totalContentList"></totalContent>
			</div> -->
			<div class="no-tips" v-if="postList.length==0">
				<image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/noCollect.png" mode="widthFix"></image>
				<div>暂未发过帖子</div>
			</div>
		</div>
		
	</div>
</template>

<script>
	let defaultJpg=require('../../../static/img/quan-active.png');
	import comments from '@/pages/components/notice/comments/index.vue';
	import totalContent from '@/pages/components/notice/totalContent/index.vue';
	import personInvitation from "@/pages/components/person/personInvitation.vue";
	import Invitation from "@/pages/components/invitationItems/invitation";
	
	export default {
		components:{
			comments,
			personInvitation,
			Invitation
		},
		data() {
			return {
				userId:'',
				hasFollow:'',//关注此用户的状态
				followNum:0,//关注人数
				fansNum:0,//粉丝数
				goodNum:0,//点赞数
				userInfo:{},
				showTabs:false,//显示tabs,vant的bug,初始化
				defaultJpg:defaultJpg,
				headerTag:[{name:'获赞',num:1},{name:'粉丝',num:1},{name:'关注',num:1},{name:'积分',num:1}],//头部关注等数据
				tabBaractive:'post',//all全部，帖子post，//comments 评论
				tabBarLoad:[],//初始已加载的tab类型
				pageNum:{//各分类的页码
					all:1,
					post:1,
					comments:1
				},
				postList:[],//帖子列,
				commentsList:[],//评论列
				totalContentList:[],//全部
				limit:10,
				popularSite:''
			}
		},
		methods: {
			toAnonymous(){
				//跳转匿名留言页
				uni.navigateTo({
					url:`/pages/notice/anonymous/anonymous?userId=${this.userId}`
				})
			},
			addNum({type,index}){
				//更新相应的帖子点赞数等
				let item=this.postList[index];
				console.log(item,type)
				switch(type){
					case 0:
							this.$set(
							this.postList,
							index,
							Object.assign(item,{good_number:1+ +item.good_number})
							);
							break;
					case 1:
							this.$set(
							this.postList,
							index,
							Object.assign(item,{not_good_number:1+ +item.not_good_number})
							);
							break;
					case 2:
							this.$set(
							this.postList,
							index,
							Object.assign(item,{share_number:1+ +item.share_number})
							);
							break;
				}
			},
			reduceNum({type,index}){
				//更新相应的帖子点赞数等
				let item=this.postList[index];
				switch(type){
					case 0:
							this.$set(
							this.postList,
							index,
							Object.assign(item,{good_number:+item.good_number-1})
							);
							break;
					case 1:
							this.$set(
							this.postList,
							index,
							Object.assign(item,{not_good_number:+item.not_good_number-1})
							);
							break;
					case 2:
							this.$set(
							this.postList,
							index,
							Object.assign(item,{share_number:+item.share_number-1})
							);
							break;
				}
			},
			followPeople(type){
				//关注
				let title=type=='follow'?"关注该用户":'取消关注';
				let _this=this
				uni.showModal({
					title:title,
					success: function (res) {
						if (res.confirm) {
							type=='follow'?_this.followUser():_this.unFollowUser();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
					complete(){
						console.log('完成')
					}
				})
			},
			async unFollowUser(){
				//取关
				let params={
					user_token:uni.getStorageSync('userToken'),
					user_id:this.userId
				}
				let res=await this.$api.unFollowUser(params);
				uni.showToast({
					icon:'none',
					title:res.data.message
				})
				if(res.data.level=='success'){
					this.hasFollow=0;
					
				}
				this.getUserInfo();
				this.getAllNumber();
			},
			async followUser(){
				//关注
				let params={
					user_token:uni.getStorageSync('userToken'),
					user_id:this.userId
				}
				let res=await this.$api.followUser(params)
				uni.showToast({
					icon:'none',
					title:res.data.message
				})
				if(res.data.level=='success'){
					this.hasFollow=res.data.data.is_follow_me;
					
				}
				this.getUserInfo();
				this.getAllNumber();
			},
			toFollow(){
				//跳转关注
				uni.navigateTo({
					url:`/pages/notice/followPeople/followPeople?userId=${this.userId}`
				})
			},
			toFans(){
				//跳转粉丝
				uni.navigateTo({
					url:`/pages/notice/fansPeople/fansPeople?userId=${this.userId}`
				})
			},
			tabBarChange(e){
				//切换tabbar
				this.tabBaractive=e.target.name;
				// if(!this.tabBarLoad.includes(this.tabBaractive)){
				// 	this.tabBarLoad.push(this.tabBaractive);
				// 	if(this.userId){
				// 		this.getUserHomePage()
				// 	}else{
				// 		this.getUserPartPostArticle();
				// 	}
					
				// }
				
			},
			toPersonInformation(){
				//跳转编辑个人信息
				uni.navigateTo({
					url:'/pages/person/personInformation/personInformation'
				})
			},
			async getAllNumber(){
				//获取用户关注数、粉丝数、圈子关注数、获赞数
				let params={
					user_token:uni.getStorageSync('userToken'),
					user_id:this.userId
				}
				let res=await this.$api.getAllNumber(params);
				if(res.data.level=='success'){
					this.goodNum=res.data.data.good_number;
					this.fansNum=res.data.data.fans_number;
					this.followNum=res.data.data.follow_number;
				}
			},
			async getUserInfo(){
				//获取用户信息
				let params={
					user_token:uni.getStorageSync('userToken'),
					user_id:this.userId
				}
				let res=await this.$api.getUserInfo(params);
				if(res.data.level=='success'){
					this.userInfo=res.data.data;
					this.hasFollow=res.data.data.is_follow;
					console.log(this.hasFollow)
				}
			},
			async getUserPartPostArticle(){
				//获取我(相关）的贴子列表
				let type=this.tabBaractive;
				let searchType=null
				switch(type){
					case 'all':searchType='all';break;
					case 'post':searchType='my';break;
					case 'comments':searchType='comment';break;
				}
				let params={
					user_token:uni.getStorageSync('userToken'),
					page:this.pageNum[type],
					limit:this.limit,
					type:searchType
				}
				let res=await this.$api.getUserPartPostArticle(params);
				if(res.data.level=='success'){
					let data=res.data.data;
					if(type=='post'){
						this.postList=[...this.postList,...data]
					}else if(type=='comments'){
						this.commentsList=[...this.commentsList,...data]
						console.log(this.commentsList)
					}
				}
			},
			
			async getUserHomePage(){
				//获取对应人的贴子列表
				let type=this.tabBaractive;
				let searchType=null
				switch(type){
					case 'all':searchType='all';break;
					case 'post':searchType='article';break;
					case 'comments':searchType='comment';break;
				}
				let params={
					user_token:uni.getStorageSync('userToken'),
					page:this.pageNum[type],
					limit:this.limit,
					type:searchType,
					user_id:this.userId
				}
				let res=await this.$api.getUserHomePage(params);
				if(res.data.level=='success'){
					if(type=='post'){
						this.postList=[...this.postList,...res.data.data]
					}else if(type=='comments'){
						this.commentsList=[...this.commentsList,...res.data.data]
						console.log(this.commentsList)
					}
				}
			},
			toTalk(){
				//跳转聊天室
				uni.navigateTo({
					url:`/pages/notice/chat/chat?userId=${this.userId}`
				})
			},
			initTabBar(tag){
				//初始化tab展示的数据
				let e={
					target:{
						name:tag
					}
				}
				this.tabBarChange(e)
			}
			
			
		},
		onShow() {
			this.getUserInfo()
		},
		onLoad(options) {
				this.tabBaractive=options.tag?options.tag:'post';//从个人中心点击帖子或评论进入
				
				this.userId=options.userId?options.userId:'';//3
				
				if(this.userId){
					this.getUserHomePage()
				}else{
					this.getUserPartPostArticle();
				}
				this.getAllNumber();

				// setTimeout(()=>{
				// 	this.showTabs=true
				// 	this.initTabBar(this.tabBaractive)
				// },500)
		},
		onPageScroll(e){
		    // console.log(e)
			this.popularSite = e.scrollTop;
		
		
		},
		
		onReachBottom() {
			this.pageNum.post++;
			if(this.userId){
				this.getUserHomePage()
			}else{
				this.getUserPartPostArticle();
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '~@/static/scss/mixin.scss';
	.no-tips{
		// margin-top:10vh;
		@include flexWrap();
		background: #fff;
		color:#6F7073;
		&>div{
			text-align: center;
			width: 100%;
		}
		}
	.personHomepage{
		
		//头部
		.header{
			border-bottom: 1px solid #eee ;
			padding:20rpx;
			background-image: url("https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/homepageBg.png");
			height: 480rpx;
			background-size: 100% 100%;
			
		}
		.header-main{
			@include flexWrap(space-between,center);
			margin-bottom: 30rpx;
			.header-logo{
				width:120rpx;
				height: 120rpx;
				border-radius: 50%;
				margin: 0 20rpx 0 0;
			}
			
			
		}
		.header-nickname{
			font-size: 52rpx;
			color:#fff;
			font-weight: 600;
		}

		.header-content{
			width: 100%;
			@include  flex(space-between,center);
			.header-content-tag-wrapper{
				@include  flexWrap(space-between);
				width: 30%;
				.header-content-tag{
					text-align: center;
					.num{
						font-weight: bold;
						font-size: 36rpx;
						color: #fff;
						margin-bottom: 10rpx;
					}
					.name{
						font-size: 22rpx;
						color:rgba(139,141,147,1);
					}
				}
			}
			.header-btn-wrapper{
				width: 100%;
				@include  flexWrap(flex-end);
				flex:1;
				.header-btn{
					text-align: center;
					height: 50rpx;
					line-height: 50rpx;
					font-weight: bold;
					font-size: 26rpx;
					border-radius: 10rpx;
					color:#000;
					padding: 0 10px;
					background:#FFE226
				}
				.header-btn-un{
					background:rgba(0,0,0,1);
					color:#FFFFFF;
					opacity:0.5;
					
				}
				.nick-talk{
					text-align: center;
					height: 50rpx;
					line-height: 50rpx;
					font-weight: bold;
					font-size: 26rpx;
					border-radius: 10rpx;
					color:#000;
					padding: 0 10px;
					background:#FFE226
				}
				.header-talk{
					margin-right:10rpx;
					text-align: center;
					height: 50rpx;
					line-height: 50rpx;
					padding: 0 10px;
					font-weight: bold;
					font-size: 26rpx;
					border-radius: 10rpx;
					background-color: #fff;
					color: #000;
				}
			}
		}
		.invitation-home{
			position: relative;
			background-color: #fff;
			top: -40rpx;
			min-height: 100rpx;
			border-top-right-radius: 50rpx;
			border-top-left-radius: 50rpx;
			overflow: hidden;
		}
		//头部简介
		.header-desc{
			margin-top:30rpx;
			margin-bottom: 60rpx;;
			font-size: 24rpx;
			color:rgba(254,254,254,0.5);
		}
		//头部标签列
		.header-tag-list{
			@include  flexWrap(flex-start);
			&-item{
				margin:20rpx;
				font-size: 20rpx;
				border-radius: 15rpx;
				border:2rpx solid #eee;
				padding:10rpx 15rpx;
			}
		}
	}
</style>
